<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>江心漫屿 - 智慧旅游应用原型展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .hero-section {
            background: linear-gradient(135deg, #2E8B57 0%, #87CEEB 50%, #4682B4 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }
        
        .phone-frame {
            width: 393px;
            height: 852px;
            background: linear-gradient(145deg, #2d3748, #1a202c);
            border-radius: 47px;
            padding: 12px;
            box-shadow: 
                0 25px 50px rgba(0,0,0,0.3),
                0 0 0 1px rgba(255,255,255,0.1),
                inset 0 1px 0 rgba(255,255,255,0.1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .phone-frame:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 
                0 35px 70px rgba(0,0,0,0.4),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .phone-frame::before {
            content: '';
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            bottom: 12px;
            background: #000;
            border-radius: 41px;
            z-index: 1;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
        }
        
        .phone-screen {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 41px;
            overflow: hidden;
            position: relative;
            z-index: 1;
            border: none;
            box-shadow: 
                inset 0 0 0 1px rgba(0,0,0,0.1),
                inset 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .phone-screen iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 41px;
            overflow: hidden;
            clip-path: inset(0 0 0 0 round 41px);
            -webkit-clip-path: inset(0 0 0 0 round 41px);
            position: relative;
            z-index: 0;
        }
        
        .dynamic-island {
            display: none;
        }
        
        .action-button {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            padding: 12px 24px;
            border-radius: 28px;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }
        
        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
        }
        
        .preview-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .preview-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .page-title {
            background: linear-gradient(135deg, #2E8B57, #87CEEB, #4682B4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .slide-in {
            animation: slideIn 0.8s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .tech-grid {
            background-image: 
                linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-section text-white py-20 relative tech-grid">
        <div class="container mx-auto px-6 relative z-10">
            <div class="text-center mb-16 floating-animation">
                <div class="inline-flex items-center bg-white/10 backdrop-blur-sm rounded-full px-6 py-2 mb-6">
                    <i class="fas fa-mobile-alt mr-2"></i>
                    <span class="text-sm font-medium">移动端应用原型</span>
                </div>
                
                <h1 class="text-6xl font-bold mb-6">
                    <span class="page-title">江心漫屿</span>
                </h1>
                
                <p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">
                    专为江心屿景区打造的智慧旅游应用，融合AR技术、文创商城、智能导览于一体，
                    为游客提供沉浸式的数字文旅体验
                </p>
                
                <div class="flex justify-center space-x-8 mb-12">
                    <div class="text-center">
                        <div class="text-3xl font-bold text-blue-300">6</div>
                        <div class="text-sm opacity-80">核心功能</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-green-300">AR</div>
                        <div class="text-sm opacity-80">增强现实</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-purple-300">3D</div>
                        <div class="text-sm opacity-80">立体导览</div>
                    </div>
                </div>
                
                <div class="flex justify-center space-x-4">
                    <button class="action-button" onclick="scrollToPreviews()">
                        <i class="fas fa-mobile-alt"></i>
                        立即体验
                    </button>
                    <button class="action-button bg-gradient-to-r from-green-500 to-teal-600" onclick="scrollToFeatures()">
                        <i class="fas fa-star"></i>
                        功能介绍
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Overview -->
    <section id="features-section" class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-800 mb-4">核心功能模块</h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    基于用户需求分析，精心设计的六大核心功能，覆盖游览全流程
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 lg:grid-cols-6 gap-8 mb-16">
                <div class="preview-card rounded-xl p-6 text-center slide-in">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">首页</h3>
                    <p class="text-gray-600 text-sm">应用入口，快捷导航</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center slide-in" style="animation-delay: 0.1s">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">景区地图</h3>
                    <p class="text-gray-600 text-sm">智能导览，精准定位</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center slide-in" style="animation-delay: 0.2s">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">文创商城</h3>
                    <p class="text-gray-600 text-sm">特色商品，在线购买</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center slide-in" style="animation-delay: 0.3s">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-cube"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">AR体验</h3>
                    <p class="text-gray-600 text-sm">增强现实，沉浸体验</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center slide-in" style="animation-delay: 0.4s">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">打卡拍照</h3>
                    <p class="text-gray-600 text-sm">记录美好，分享精彩</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center slide-in" style="animation-delay: 0.5s">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">个人中心</h3>
                    <p class="text-gray-600 text-sm">个人数据，成就展示</p>
                </div>
            </div>
        </div>
    </section>

    <!-- App Previews -->
    <section id="app-previews" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-800 mb-4">应用界面预览</h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    基于iPhone 15 Pro尺寸设计的高保真原型，完美还原真实应用体验<br>
                    <span class="text-sm text-blue-600 font-medium">点击任意手机模型即可体验对应功能</span>
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-12">
                <!-- 首页 -->
                <div class="flex flex-col items-center">
                    <div class="phone-frame mb-6">
                        <div class="phone-screen">
                            <iframe src="home.html" class="w-full h-full" frameborder="0" style="border-radius: 41px; clip-path: inset(0 0 0 0 round 41px); -webkit-clip-path: inset(0 0 0 0 round 41px);"></iframe>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">首页</h3>
                        <p class="text-gray-600">应用主入口，功能导航</p>
                    </div>
                </div>
                
                <!-- 景区地图 -->
                <div class="flex flex-col items-center">
                    <div class="phone-frame mb-6">
                        <div class="phone-screen">
                            <iframe src="map.html" class="w-full h-full" frameborder="0" style="border-radius: 41px; clip-path: inset(0 0 0 0 round 41px); -webkit-clip-path: inset(0 0 0 0 round 41px);"></iframe>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">景区地图</h3>
                        <p class="text-gray-600">智能导览，景点定位</p>
                    </div>
                </div>
                
                <!-- 文创商城 -->
                <div class="flex flex-col items-center">
                    <div class="phone-frame mb-6">
                        <div class="phone-screen">
                            <iframe src="shop.html" class="w-full h-full" frameborder="0" style="border-radius: 41px; clip-path: inset(0 0 0 0 round 41px); -webkit-clip-path: inset(0 0 0 0 round 41px);"></iframe>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">文创商城</h3>
                        <p class="text-gray-600">特色商品，在线购买</p>
                    </div>
                </div>
                
                <!-- AR体验 -->
                <div class="flex flex-col items-center">
                    <div class="phone-frame mb-6">
                        <div class="phone-screen">
                            <iframe src="ar.html" class="w-full h-full" frameborder="0" style="border-radius: 41px; clip-path: inset(0 0 0 0 round 41px); -webkit-clip-path: inset(0 0 0 0 round 41px);"></iframe>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">AR体验</h3>
                        <p class="text-gray-600">增强现实，沉浸体验</p>
                    </div>
                </div>
                
                <!-- 打卡拍照 -->
                <div class="flex flex-col items-center">
                    <div class="phone-frame mb-6">
                        <div class="phone-screen">
                            <iframe src="checkin.html" class="w-full h-full" frameborder="0" style="border-radius: 41px; clip-path: inset(0 0 0 0 round 41px); -webkit-clip-path: inset(0 0 0 0 round 41px);"></iframe>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">打卡拍照</h3>
                        <p class="text-gray-600">记录美好，分享精彩</p>
                    </div>
                </div>
                
                <!-- 个人中心 -->
                <div class="flex flex-col items-center">
                    <div class="phone-frame mb-6">
                        <div class="phone-screen">
                            <iframe src="profile.html" class="w-full h-full" frameborder="0" style="border-radius: 41px; clip-path: inset(0 0 0 0 round 41px); -webkit-clip-path: inset(0 0 0 0 round 41px);"></iframe>
                        </div>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">个人中心</h3>
                        <p class="text-gray-600">个人数据，成就展示</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technology Stack -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-800 mb-4">技术架构</h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    采用现代化的前端技术栈，确保应用的性能和用户体验
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="preview-card rounded-xl p-6 text-center">
                    <div class="text-4xl mb-4 text-blue-600">
                        <i class="fab fa-html5"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">HTML5</h3>
                    <p class="text-gray-600 text-sm">语义化标签，现代化结构</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center">
                    <div class="text-4xl mb-4 text-purple-600">
                        <i class="fab fa-css3-alt"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Tailwind CSS</h3>
                    <p class="text-gray-600 text-sm">响应式框架，现代化UI</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center">
                    <div class="text-4xl mb-4 text-yellow-600">
                        <i class="fab fa-js"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">JavaScript</h3>
                    <p class="text-gray-600 text-sm">ES6+标准，丰富交互</p>
                </div>
                
                <div class="preview-card rounded-xl p-6 text-center">
                    <div class="text-4xl mb-4 text-gray-600">
                        <i class="fas fa-icons"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">FontAwesome</h3>
                    <p class="text-gray-600 text-sm">图标系统，视觉统一</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-4xl font-bold mb-6">开始体验智慧旅游</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
                点击下方任意手机模型，即可体验对应的功能模块。每个页面都是完整的高保真原型，
                包含了真实应用的所有交互细节。
            </p>
            
            <div class="flex flex-wrap justify-center gap-4">
                <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <i class="fas fa-mobile-alt mr-2"></i>
                    <span>移动端优化</span>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <i class="fas fa-magic mr-2"></i>
                    <span>交互动画</span>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <i class="fas fa-palette mr-2"></i>
                    <span>精美设计</span>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <i class="fas fa-code mr-2"></i>
                    <span>现代技术</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="text-center">
                <div class="mb-6">
                    <h3 class="text-2xl font-bold mb-2">
                        <span class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                            江心漫屿
                        </span>
                    </h3>
                    <p class="text-gray-400">智慧旅游，数字体验</p>
                </div>
                
                <div class="flex justify-center space-x-6 mb-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fab fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fab fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fas fa-envelope text-xl"></i>
                    </a>
                </div>
                
                <div class="border-t border-gray-800 pt-6">
                    <p class="text-gray-400 text-sm">
                        © 2024 江心漫屿智慧旅游应用. 专为江心屿景区定制开发.
                    </p>
                    <p class="text-gray-500 text-xs mt-2">
                        本原型展示所有功能均为演示用途 | 技术支持：现代前端技术栈
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 添加滚动动画效果
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // 观察所有需要动画的元素
        document.querySelectorAll('.preview-card, .phone-frame').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });

        // 添加页面加载动画
        window.addEventListener('load', () => {
            document.body.style.opacity = '1';
        });

        // 初始化页面透明度
        document.body.style.opacity = '0';
        document.body.style.transition = 'opacity 0.5s ease';

        // 滚动到预览区域
        function scrollToPreviews() {
            document.querySelector('#app-previews').scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });
        }

        // 滚动到功能介绍
        function scrollToFeatures() {
            document.querySelector('#features-section').scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });
        }

        // 添加手机框架点击效果
        document.querySelectorAll('.phone-frame').forEach(frame => {
            frame.addEventListener('click', function() {
                this.style.transform = 'scale(1.05)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 200);
            });
        });
    </script>
</body>
</html>